<template>
    <div class="goodsForm page">
        <form-header :title="'添加商品'"></form-header>
        <div class="content">
            <div class="item">
                <cube-input @blur="onBlur" placeholder="请输入商品名称" v-model="goods.name"></cube-input>
            </div>
            <div class="item">
                <form-cell
                        :important="true"
                        :title="'单位'"
                        :typeInput="true"
                        :placeholder="goods.unit?goods.unit:'请输入商品单位'"
                        v-model="goods.unit"
                        :inputClass="!!goods.unit"
                ></form-cell>
                <form-cell
                        :important="true"
                        :title="'分类'"
                        :type="true"
                        :value="'请选择商品类目'"
                        :selected="true"
                        moreSelected
                        :cascadeData="typeList"
                        v-model="typeValue"
                        @getIndex="getTypeIndex"
                ></form-cell>
                <form-cell
                        :title="'描述'"
                        :typeInput="true"
                        :placeholder="goods.info?goods.info:'请输入商品描述'"
                        v-model="goods.info"
                        :inputClass="!!goods.info"
                ></form-cell>

          <!--      <form-cell
                        :title="'虚拟销量'"
                        :typeInput="true"
                        :placeholder="goods.sales?goods.sales:'请输入商品虚拟销量'"
                        v-model="goods.sales"
                        :inputClass="!!goods.sales"
                        :inputType="'number'"
                ></form-cell>-->

            </div>
            <div class="item">
                <div class="imgCell">
                    <div class="title"><span>*</span>上传商品缩略图</div>
                    <imageUpload v-model="goods.midImg"></imageUpload>
                </div>
            </div>
            <div class="item">
                <div class="imgCell">
                    <div class="title"><span>*</span>上传商品主图(主图只能添加一张)</div>
                    <imageUpload v-model="goods.img"></imageUpload>
                </div>
            </div>
            <div class="item">
                <div class="imgCell">
                    <div class="title"><span>*</span>上传详情页图</div>
                    <imageUpload v-model="goods.bigImg"></imageUpload>
                </div>
            </div>
            <div class="item">
                <form-cell
                        important
                        :title="'物流规则'"
                        :type="true"
                        v-model="logRules"
                        :selected="true"
                        :list="logList"
                        @getIndex="getLogRulesIndex"
                ></form-cell>
                <form-cell
                        important
                        :title="'满免数量'"
                        :typeInput="true"
                        :placeholder="goods.fullNumber?goods.fullNumber:'请输入满免数量'"
                        v-model="goods.fullNumber"
                        v-show="logRules=='满免'"
                        :inputType="'number'"
                        :inputClass="!!goods.fullNumber"
                ></form-cell>
                <form-cell
                        important
                        :title="'未满邮费'"
                        :typeInput="true"
                        :placeholder="goods.logFee?goods.logFee:'请输入未满邮费'"
                        v-model="goods.logFee"
                        v-show="logRules=='满免'"
                        :inputType="'number'"
                        :inputClass="!!goods.logFee"
                ></form-cell>
                <form-cell
                        important
                        :title="'产品重量kg'"
                        :typeInput="true"
                        :placeholder="goods.weight?goods.weight:'请输入产品重量kg'"
                        v-model="goods.weight"
                        v-show="logRules=='计重'"
                        :inputType="'number'"
                        :inputClass="!!goods.weight"
                ></form-cell>
                <form-cell
                        important
                        :title="'每箱数量'"
                        :typeInput="true"
                        :placeholder="goods.perBox?goods.perBox:'请输入每箱数量'"
                        v-model="goods.perBox"
                        v-show="logRules=='计重'"
                        :inputType="'number'"
                        :inputClass="!!goods.perBox"
                ></form-cell>
            </div>
            <div class="item">

                <form-cell
                        :title="'分享标题'"
                        :typeInput="true"
                        :placeholder="goods.title?goods.title:'请输入分享标题'"
                        v-model="goods.title"
                        :inputClass="!!goods.title"
                ></form-cell>
            </div>
            <div class="item">
<!--                <form-cell-->
<!--                        important-->
<!--                        :title="'是否转货'"-->
<!--                        :type="true"-->
<!--                        v-model="isTransform"-->
<!--                        :selected="true"-->
<!--                        :list="booleanList"-->
<!--                        @getIndex="getTransformIndex"-->
<!--                ></form-cell>-->
            <!--    <form-cell
                        important
                        :title="'是否发货'"
                        :type="true"
                        v-model="isDeliver"
                        :selected="true"
                        :list="booleanList"
                        @getIndex="getDeliverIndex"
                ></form-cell>-->
            </div>

            <div class="item">
                <form-cell
                        :title="'库存'"
                        :typeInput="true"
                        :placeholder="goods.stock?goods.stock:'请输入商品库存'"
                        v-model="goods.stock"
                        :inputType="'number'"
                        :inputClass="!!goods.stock"
                ></form-cell>
                <form-cell
                        :title="'保质期'"
                        :typeInput="true"
                        :placeholder="goods.guaranty?goods.guaranty:'请输入商品保质期'"
                        v-model="goods.guaranty"
                        :inputClass="!!goods.guaranty"
                ></form-cell>
<!--                <form-cell-->
<!--                        :title="'生产日期'"-->
<!--                        :typeInput="true"-->
<!--                        :placeholder="goods.createTime?goods.createTime:'请输入商品生产日期'"-->
<!--                        v-model="goods.createTime"-->
<!--                        :inputClass="!!goods.createTime"-->
<!--                ></form-cell>-->
                <div class="datePicker">
                    <div class="title"><div></div>生产日期</div>
                    <div class="select" @click="selectDate">
                        <span v-html="createTime"></span>
                        <i class="cubeic-arrow arrow-icon"></i>
                    </div>
                </div>
                <form-cell
                        :title="'过期时间'"
                        :typeInput="true"
                        :placeholder="goods.expDate?goods.expDate:'请输入商品过期时间'"
                        v-model="goods.expDate"
                        :inputClass="!!goods.expDate"
                ></form-cell>
            </div>
            <div class="item">
                <form-cell
                        important
                        :title="'原价'"
                        :typeInput="true"
                        :placeholder="goods.oldPrice?goods.oldPrice:'请输入商品原价'"
                        v-model="goods.oldPrice"
                        :inputType="'number'"
                        :inputClass="!!goods.oldPrice"
                ></form-cell>
                <form-cell
                        important
                        :title="'现价'"
                        :typeInput="true"
                        :placeholder="goods.nowPrice?goods.nowPrice:'请输入商品现价'"
                        v-model="goods.nowPrice"
                        :inputType="'number'"
                        :inputClass="!!goods.nowPrice"
                ></form-cell>
                <form-cell
                        important
                        :title="'利润'"
                        :typeInput="true"
                        :placeholder="goods.profit?goods.profit:'请输入商品利润'"
                        v-model="goods.profit"
                        :inputType="'number'"
                        :inputClass="!!goods.profit"
                ></form-cell>
                <form-cell
                        :title="'排序'"
                        :typeInput="true"
                        :placeholder="goods.sort?goods.sort:'请输入商品排序'"
                        v-model="goods.sort"
                        :inputType="'number'"
                        :inputClass="!!goods.sort"
                ></form-cell>
            </div>
            <div class="item">
                <form-cell
                        :important="true"
                        :title="'售卖类型'"
                        :headIcon="true"
                        :type="true"
                        v-model="modeValue"
                        :selected="true"
                        :list="modeList"
                        @getIndex="getSaleIndex"
                ></form-cell>
<!--                <form-cell-->
<!--                        :title="'必需积分'"-->
<!--                        :typeInput="true"-->
<!--                        :placeholder="act.point?act.point:'请输入必需积分'"-->
<!--                        v-model="act.point"-->
<!--                        :inputType="'number'"-->
<!--                ></form-cell>-->
                <form-cell
                        :title="'最高可抵扣优惠券'"
                        :typeInput="true"
                        :placeholder="act.maxCoupon?act.maxCoupon:'请输入最高可抵扣优惠券'"
                        v-model="act.maxCoupon"
                        :inputType="'number'"
                        :inputClass="!!act.maxCoupon"
                ></form-cell>
                <form-cell
                        :title="'最高可抵扣换购券'"
                        :typeInput="true"
                        :placeholder="act.maxVoucher?act.maxVoucher:'请输入最高可抵扣换购券'"
                        v-model="act.maxVoucher"
                        :inputType="'number'"
                        :inputClass="!!act.maxVoucher"
                ></form-cell>
                <form-cell
                        :title="'换购券奖励'"
                        :typeInput="true"
                        :placeholder="act.voucherReward?act.voucherReward:'请输入换购券奖励'"
                        v-model="act.voucherReward"
                        :inputClass="!!act.voucherReward"
                ></form-cell>
                <form-cell
                        :title="'代金券奖励'"
                        :typeInput="true"
                        :placeholder="act.cashReward?act.cashReward:'请输入代金券奖励'"
                        v-model="act.cashReward"
                        :inputClass="!!act.cashReward"
                ></form-cell>
                <form-cell
                        :title="'优惠券奖励'"
                        :typeInput="true"
                        :placeholder="act.couponReward?act.couponReward:'请输入优惠券奖励'"
                        v-model="act.couponReward"
                        :inputClass="!!act.couponReward"
                ></form-cell>
            </div>
<!--                <div class="addParameter">+添加其他参数</div>-->

            <div class="item">
                <div class="btnBox" v-if="toggleBtn">
<!--                    <div class="join" @click="submit('join')">放入仓库</div>-->
                    <div class="sell" @click="submit">提交</div>
                </div>
                <div class="btnBox secBox" v-else>
                    <div class="join">删除</div>
                    <div class="join">上架</div>
                    <div class="sell">保存</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import formCell from '@/components/form-cell'
    import formUpdate from '@/components/form-update'
    import imageUpload from '@/components/form-update/image-upload'
    import {getTypeList,submitGood,getFormData,editGoods} from '@/api/form'
    import {showError} from '@/toast'
    import {showCorrect} from '@/dialog'
    export default {
        components:{formCell,formUpdate,formHeader,imageUpload},
        name : "index",
        data(){
            return{
                goods:{
                    id:null,            //id
                    type: null,         //分类
                    name: null,         //产品名字
                    unit: null,         //单位
                    sales: null,        //虚拟销量
                    weight: null,       //产品重量
                    perBox: null,       //每箱数量
                    info: null,         //描述
                    title: null,        //分享标题
                    oldPrice: null,     //原价
                    nowPrice: null,     //现价
                    profit: null,       //利润
                    openSku: null,      //是否开启规格
                    img: null,          //缩略图
                    bigImg: null,       //详情图
                    shelf: null,        //是否上架
                    sort: null,         //排序
                    expDate: null,      //过期时间
                    logType: 0,         //物流规则
                    fullNumber: null,   //满免数量
                    logFee: null,       //物流费
                    stock: null,        //库存
                    midImg: null,       //主图
                    prices: [],
                    saleType:0,          //售卖类型
                    userId:null,
                    guaranty:null,      //保质期
                    createTime:null        //生产日期
                },
                act:{
                    id:null,
                    name:null,
                    goodsId:null,
                    point:null,         //必须积分
                    maxVoucher:null,    //最大使用换购券
                    maxCoupon:null,     //最大使用优惠券
                    transfer:null,      //是否转货
                    delivery:null,      //是否发货
                    couponReward:null,  //优惠券奖励
                    voucherReward:null, //换购券奖励
                    cashReward:null     //代金券奖励
                },
                types:[],           //分类
                isTransform:'',     //是否转货*
                isDeliver:'',       //是否转货*
                isSell:true,        //是否上架
                modeList:[
                    {text:'分享有利',value:'分享有利'}
                ],
                modeValue:'分享有利',
                typeList:[],
                typeValue:'请选择商品类目',
                toggleBtn:true,
                logList:[
                    {text:'包邮',value:'包邮'},
                    {text:'满免',value:'满免'},
                    {text:'计重',value:'计重'}
                ],
                logRules:'包邮',
                booleanList:[
                    {text:'否',value:'否'},
                    {text:'是',value:'是'},
                ],
                clickFlag:true,
                imgLength:'',
                createTime:''
            }
        },
        methods:{
            onBlur(e){
                if (!e.target.value){
                    showError('商品名称不能为空！')
                }
            },
            turn(path){
                this.$router.push({
                    path:path
                })
            },
            getTypeIndex(index){
                this.goods.type = this.typeList[index[0]].children[index[1]].id
                this.types =[]
                this.types[0] = this.typeList[index[0]].children[index[1]].id
            },
            getLogRulesIndex(index){
                this.goods.logType = index[0]
            },
            getTransformIndex(index){
                this.act.transfer = index[0]
            },
            getDeliverIndex(index){
                this.act.delivery = index[0]
            },
            getSaleIndex(index){
                this.goods.saleType = index[0]
            },
            selectDate(){
                if (!this.datePicker) {
                    let date = new Date()
                    // console.log(date)
                    this.datePicker = this.$createDatePicker({
                        title: '选择生产日期',
                        min: new Date(2008, 7, 8),
                        max: new Date(date.getFullYear(), date.getMonth(), date.getDay()),
                        value: new Date(),
                        onSelect: this.selectTrue
                    })
                }
                this.datePicker.show()
            },
            selectTrue(date, selectedVal, selectedText) {
                this.goods.createTime = selectedVal.join('-')+' 00:00:00'
                this.createTime = selectedVal.join('-')
            },
            submit(){
                // const toast = this.$createToast({
                //     time: 0,
                //     txt: '正在上传'
                // })
                // toast.show()
                // if (type == 'join'){
                //     this.isSell = false
                // }
                if (!this.clickFlag){
                    showError('请勿重复提交')
                    return
                }
                this.clickFlag = false
                setTimeout(()=>{
                    this.clickFlag = true
                },5000)
                if (this.goods.name==null||this.goods.name==''){
                    // toast.hide()
                    showError('商品名不能为空')
                    return
                }
                if (this.goods.unit==null||this.goods.unit==''){
                    // toast.hide()
                    // console.log(this.goods.unit)
                    showError('商品单位不能为空')
                    return
                }
                if (this.types==null){
                    // toast.hide()
                    showError('商品类目不能为空')
                    return
                }
                if (this.goods.logType==null){
                    // toast.hide()
                    showError('物流规则不能为空')
                    return
                }
                if (this.goods.logType==1){
                    if (!this.goods.fullNumber||this.goods.fullNumber<0){
                        // toast.hide()
                        showError('满免数量不能为0或空')
                        return
                    }
                    if (!this.goods.logFee||this.goods.logFee<0){
                        // toast.hide()
                        showError('未满邮费不能为0或空')
                        return
                    }
                }
                if (this.goods.logType==2){
                    if (!this.goods.weight||this.goods.weight<0){
                        // toast.hide()
                        showError('商品重量不能为0或空')
                        return
                    }
                    if (!this.goods.perBox||this.goods.perBox<0){
                        // toast.hide()
                        showError('每箱数量不能为0或空')
                        return
                    }
                }
                // if (this.isTransform==''){
                //     // toast.hide()
                //     showError('请选择是否转货')
                //     return
                // }
                // if (this.isDeliver==''){
                //     // toast.hide()
                //     showError('请选择是否发货')
                //     return
                // }
                if (!this.goods.oldPrice||this.goods.oldPrice<0){
                    // toast.hide()
                    showError('商品原价不能为0或空')
                    return
                }
                if (!this.goods.stock||this.goods.stock<0){
                    // toast.hide()
                    showError('商品库存不能为0或空')
                    return
                }
                if (!this.goods.nowPrice||this.goods.nowPrice<0){
                    // toast.hide()
                    showError('商品现价不能为0或空')
                    return
                }
                if (!this.goods.profit||this.goods.profit<0){
                    // toast.hide()
                    showError('商品利润不能为0或空')
                    return
                }
                if (!this.goods.midImg){
                    // toast.hide()
                    showError('商品缩略图不能为空')
                    return
                }
                if (!this.goods.img){
                    // toast.hide()
                    showError('商品主图不能为空')
                    return
                }
                if (!this.goods.bigImg){
                    // toast.hide()
                    showError('商品详情图不能为空')
                    return
                }
                // toast.hide()
                // console.log(this.act)
                this.goods.img = this.goods.img.split(',')[0]
                // console.log(this.goods.img)
                if (!this.goods.id){
                    submitGood(this.goods,this.act,this.types,this.goods.createTime).then(res=>{
                        this.$createDialog({
                            type: 'alert',
                            title: '我是标题',
                            content: '上传成功！',
                            confirm: this.turn('/shop'),
                            icon: 'cubeic-alert'
                        }).show()
                    })
                }else {
                    editGoods(this.goods,this.act,this.types,this.goods.createTime).then(res=>{
                        this.$createDialog({
                            type: 'alert',
                            title: '我是标题',
                            content: '上传成功！',
                            confirm: this.turn('/shop'),
                            icon: 'cubeic-alert'
                        }).show()
                    })
                }
            }
        },
        activated() {
            if (this.$route.query.id){
                getFormData(this.$route.query.id).then(res=>{
                    // console.log(res)
                    this.goods.id = res.data.id
                    this.goods.userId = res.data.userId
                    this.goods.name = res.data.name?res.data.name:null
                    this.goods.unit=  res.data.unit?res.data.unit:null
                    this.goods.sales=  res.data.sales?res.data.sales:null
                    this.goods.weight=  res.data.weight?res.data.weight:null
                    this.goods.perBox=  res.data.perBox?res.data.perBox:null
                    this.goods.info=  res.data.info?res.data.info:null
                    this.goods.title=  res.data.title?res.data.title:null
                    this.goods.oldPrice=  res.data.oldPrice?res.data.oldPrice:null
                    this.goods.nowPrice=  res.data.nowPrice?res.data.nowPrice:null
                    this.goods.profit=  res.data.profit?res.data.profit:null
                    this.goods.img=  res.data.img?res.data.img:null
                    this.goods.bigImg=  res.data.bigImg?res.data.bigImg:null
                    this.goods.sort=  res.data.sort?res.data.sort:null
                    this.goods.expDate=  res.data.expDate?res.data.expDate:null
                    this.goods.fullNumber=  res.data.fullNumber?res.data.fullNumber:null
                    this.goods.logFee=  res.data.logFee?res.data.logFee:null
                    this.goods.stock=  res.data.stock?res.data.stock:null
                    this.goods.midImg=  res.data.midImg?res.data.midImg:null
                    this.goods.guaranty=  res.data.guaranty?res.data.guaranty:null
                    this.goods.createTime=  res.data.createTime?res.data.createTime:null
                    this.goods.logType = res.data.logType?res.data.logType:0
                    this.goods.saleType = res.data.saleType?res.data.saleType:0
                    this.logRules = this.logList[this.goods.logType].value
                    this.modeValue = this.modeList[this.goods.saleType].value

                    this.act = res.extra.act
                    this.act.point = res.extra.act.point?res.extra.act.point:null
                    this.act.maxVoucher = res.extra.act.maxVoucher?res.extra.act.maxVoucher:null
                    this.act.maxCoupon = res.extra.act.maxCoupon?res.extra.act.maxCoupon:null
                    this.act.couponReward = res.extra.act.couponReward?res.extra.act.couponReward:null
                    this.act.voucherReward = res.extra.act.voucherReward?res.extra.act.voucherReward:null
                    this.act.cashReward = res.extra.act.cashReward?res.extra.act.cashReward:null
                    this.act.transfer = res.extra.act.transfer?res.extra.act.transfer:0
                    this.act.delivery = res.extra.act.delivery?res.extra.act.delivery:0
                    this.isTransform = this.booleanList[this.act.transfer].value
                    this.isDeliver = this.booleanList[this.act.delivery].value

                    this.types = res.extra.types[0]

                    this.createTime = this.goods.createTime.toString().split(' ')[0]

                })
            }
            getTypeList().then(res=>{
                let list = res.data.filter(item=>
                    item.children.length >0
                )
                list=list.map(obj=>{
                    this.$set( obj, 'value', obj.name)
                    this.$set( obj, 'text', obj.name)
                    obj.children=obj.children.map(item=>{
                        this.$set( item, 'value', item.name)
                        this.$set( item, 'text', item.name)
                        return item
                    })
                    return obj
                })
                this.typeList = list
                // console.log(this.types)
                if (this.types){
                    this.typeList.forEach((obj,index)=>{
                        if (obj.id==this.types[0]){
                            let name = obj.name
                            obj.children.forEach(item=>{
                                if (item.id==this.types[1]){
                                    this.typeValue = name+'/'+item.name
                                }
                            })
                        }
                    })
                }
            })
        }
    }
</script>

<style scoped lang="stylus">
.goodsForm
    background-color $page-bg
    .item
        margin-top 0.27rem
        .cube-input
            border-bottom 0.02rem solid #EEEEEE
        .cube-input_active::after
            border none
    .content
        padding-top 1.17rem
        background-color  #EEEEEE
        /*padding-bottom 1.17rem*/
    .addParameter
        padding 0.40rem 0.40rem
        text-align right
        color #00a398
        font-size 0.40rem
    .btnBox
        background-color  #fff
        padding 0.13rem 0.4rem
        display flex
        justify-content space-between
        .join,.sell
            font-size 0.40rem
            color #333333
            padding 0.35rem 1.44rem
            border-radius 0.08rem
        .join
            border 0.03rem solid #e5e5e5
        .sell
            background-color #00A398
            width 100%
            color #fff
            text-align center
    .secBox
        .join,.sell
            padding 0.35rem 0.95rem
    .imgCell
        background-color: #fff
        padding 10px 15px
        font-size  15px
        color #333
        .title
            margin-bottom 15px
            span
                color #00A390
    .datePicker
        color #333
        display flex
        justify-content space-between
        padding 0 18px
        height 43px
        font-size 14px
        align-items center
        background-color: #fff
        border 1px solid #eee
        .select
            flex 1
            text-align right
            height 100%
            line-height 43px
</style>